import { useRef } from 'react';
import useGame from '../../hooks/useGame';
import { Switcher } from '../Switcher/Switcher';
import { Tips } from '../Tips/Tips';
import { ToolBar } from '../ToolBar/ToolBar';
import { TransformBar } from '../TransformBar/TransformBar';
import { ImagePreview } from '../ImagePreview';
import { ContextMenu, ContextMenuItem, ContextMenuTrigger } from 'rctx-contextmenu';

export function AnimationCanvas(): JSX.Element | null {
    const myRef = useRef<HTMLCanvasElement>(null)
    // const { controller } = 
    useGame(myRef);
    // useEffect(() => {
    //     // 此处可以用app编写游戏代码
    //     if (!controller) {
    //         return;
    //     }
    //     console.log("main enter");
    // }, [])

    return (
        <>
            <div id="canvasWrap" className="w-full h-full relative">
                <div className='ml-2 mt-2 absolute'>
                    <Switcher></Switcher>
                </div>
                <div className='mt-2 absolute right-3'>
                    <ToolBar></ToolBar>
                </div>
                <div className='left-2/4 -translate-x-2/4 bg-green-500 absolute mt-2'>
                    <Tips></Tips>
                </div>

                <div className='left-2/4 -translate-x-2/4 absolute bottom-3'>
                    <TransformBar></TransformBar>
                </div>
                <ImagePreview></ImagePreview>
                {/* <ContextMenuTrigger id="context-menu-1" className="music-box" key="1"> */}
                <canvas ref={myRef} id="main">
                </canvas>
                {/* </ContextMenuTrigger> */}
                {/* <ContextMenu id="context-menu-1">
                    <ContextMenuItem>
                        <div>111111</div>
                    </ContextMenuItem>
                </ContextMenu> */}
            </div>
        </>
    );
}